کد سیاه و سفید شدن تصاویر و رنگی شدن انها با موس

نمونه

دریافت کد:

</p> <style> img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%); filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; -ms-transition: 1.5s; -khtml-transition: 1.5s; } img:hover{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: none; transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; -ms-transition: 1.5s; -khtml-transition: 1.5s; } </style> <p style="text-align: center;"><a href="http://rasekhoon.net/weblog/" target="_blank"><img alt="" src="http://theme.rsblog.ir/code/emamreza_roozshomar/b.jpg" style="width: 180px; height: 21px;" /></a></p> <p style="text-align: center;"> <a href="http://admin.rasekhoonblog.com" target="_blank" rel="nofollow" ><strong><span style="color:#ff33ff;">کد سیاه و سفید شدن عکس ها</span></strong></a></p> <p>

کد سایه دار شدن لینک با رفتن موس بر روی لینک

نمونه

دریافت کد:

</p> <style> a:hover{ text-shadow:0px 2px 3px; -moz-text-shadow:0px 2px 3px; -o-text-shadow:0px 2px 3px; -ms-text-shadow:0px 2px 3px; -khtml-text-shadow:0px 2px 3px; -webkit-text-shadow:0px 2px 3px;} </style> <p style="text-align: center;"><a href="http://rasekhoon.net/weblog/" target="_blank"><img alt="" src="http://theme.rsblog.ir/code/emamreza_roozshomar/b.jpg" style="width: 180px; height: 21px;" /></a></p> <p style="text-align: center;"> <a href="http://admin.rasekhoonblog.com" target="_blank" rel="nofollow" ><strong><span style="color:#ff33ff;">دریافت کد</span></strong></a></p> <p>

کد زوم روی تصویر با آوردن موس روی آن

نمونه

دریافت کد:

</p> <style> img:hover{border-radius: 20px; opacity:0.8;filter:alpha(opacity=80); -webkit-transform:scale(1.1):( Webkit: Scale up image to 1.2x original size); -moz-border-radius:6px;-webkit-border-radius:30px; box-shadow: 10px 10px 5px #000; -moz-transform:scale(1.1):( Mozilla scale version); -moz-transform:scale(0.9):(Explorer scale version); } img:out{border-radius: 40px; opacity:1;filter:alpha(opacity=100); -webkit-transform:scale(0.9):( Webkit: Scale down image to 0.8x original size); padding:0px; float:center; -moz-transform:scale(0.9):(Mozilla scale version); -moz-transform:scale(0.9):(Explorer scale version); } img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style> <p style="text-align: center;"><a href="http://rasekhoon.net/weblog/" target="_blank"><img alt="" src="http://theme.rsblog.ir/code/emamreza_roozshomar/b.jpg" style="width: 180px; height: 21px;" /></a></p> <p style="text-align: center;"> <a href="http://admin.rasekhoonblog.com" target="_blank" rel="nofollow" ><strong><span style="color:#ff33ff;">دریافت کد</span></strong></a></p> <p>

کد چرخش ستاره ها با رفتن موس بر روی لینک

نمونه

دریافت کد:

</p> <style> a:visited{color:#000000;text-decoration: none}a:hover{background:url(http://bayanbox.ir/view/2899731646139888250/star.gif);text-decoration: none} </style> <p style="text-align: center;"><a href="http://rasekhoon.net/weblog/" target="_blank"><img alt="" src="http://theme.rsblog.ir/code/emamreza_roozshomar/b.jpg" style="width: 180px; height: 21px;" /></a></p> <p style="text-align: center;"> <a href="http://admin.rasekhoonblog.com" target="_blank" rel="nofollow" ><strong><span style="color:#ff33ff;">دریافت کد</span></strong></a></p> <p>

کد گرد شدن گوشه ،زوم و سایه دار شدن تصویر

نمونه

دریافت کد:

</p> <style> img:hover{border-radius: 50px; opacity:0.8;filter:alpha(opacity=80); -webkit-transform:scale(1.1):( Webkit: Scale up image to 1.2x original size); -moz-border-radius:6px;-webkit-border-radius:30px; box-shadow: 10px 10px 5px #000; -moz-transform:scale(1.1):( Mozilla scale version); -moz-transform:scale(0.9):(Explorer scale version); } img:out{border-radius: 40px; opacity:1;filter:alpha(opacity=100); -webkit-transform:scale(0.9):( Webkit: Scale down image to 0.8x original size); padding:0px; float:center; -moz-transform:scale(0.9):(Mozilla scale version); -moz-transform:scale(0.9):(Explorer scale version); } img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style> <p style="text-align: center;"><a href="http://rasekhoon.net/weblog/" target="_blank"><img alt="" src="http://theme.rsblog.ir/code/emamreza_roozshomar/b.jpg" style="width: 180px; height: 21px;" /></a></p> <p style="text-align: center;"> <a href="http://admin.rasekhoonblog.com" target="_blank" rel="nofollow" ><strong><span style="color:#ff33ff;">دریافت کد</span></strong></a></p> <p>

کد چرخش و به شکل برگ شدن تصاویر وبلاگ

نمونه

دریافت کد:

<style> img:hover { border: dashed underline 1px #333; border-radius: 80px 6px 80px 6px; box-shadow: 5 5 1px #333; -webkit-transition: all 2s ease-in; -moz-transition: all 2s ease-in; -o-transition: all 2s ease-in; transition: all 2s ease-in; -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); } img{border-radius: 40px; opacity:1;filter:alpha(opacity=100); -webkit-transform:scale(0.9):( Webkit: Scale down image to 0.8x original size); padding:0px; float:center; -moz-transform:scale(0.9):(Mozilla scale version); -moz-transform:scale(0.9):(Explorer scale version); } </style> <p style="text-align: center;"><a href="http://rasekhoon.net/weblog/" target="_blank"><img alt="" src="http://theme.rsblog.ir/code/emamreza_roozshomar/b.jpg" style="width: 180px; height: 21px;" /></a></p> <p style="text-align: center;"> <a href="http://admin.rasekhoonblog.com" target="_blank" rel="nofollow" ><strong><span style="color:#ff33ff;">دریافت کد</span></strong></a></p> <p>